<template>
  <main>
    <div class="change-box">
      <mt-field placeholder="旧密码" :attr="{minlength: 3}" type="password" v-model="oldPassword" disableClear></mt-field>
      <mt-field placeholder="新密码" type="password" style="margin: 12px auto;" v-model="newPassword" disableClear></mt-field>
      <mt-field placeholder="确认密码" type="password" @input="validPwd" v-model="confirmPwd" disableClear></mt-field>
      <span v-if="warning" style="display: block; margin: 3px 0 2px 10px;color: #f00;">密码不一致</span>
    </div>
    <button :class="['change-btn', confirm ? 'confirm': '']" @click="confirmChangePwd">确认并保存</button>
  </main>
</template>

<script>
export default {
  name: 'change-pwd',
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPwd: '',
      warning: false,
      confirm: false
    }
  },
  methods: {
    validPwd(v) {
      const reg = new RegExp('^' + v, 'g')
      if(!reg.test(this.newPassword)) {
        this.warning = true
      }else {
        this.warning = false
      }
      if(this.newPassword === v && v.length >= 6 && this.oldPassword.length >= 6) {
        this.confirm = true
      }else {
        this.confirm = false
      }
    },
    confirmChangePwd() {
      if(!this.confirm) return
      this.$router.push('/personalinfo')
    }
  }
}
</script>

<style scoped>
  .change-box {
    background-color: #fff;
    padding: 20px;
  }
  /deep/.mint-field-core {
    height: 55px;
    padding: 5px 10px;
    background-color: #ccc;
    border: none;
    border-radius: 5px;
    font-size: 26px
  }
  .change-btn {
    display: block;
    height: 80px;
    width: 90%;
    margin: 20px auto;
    background-color: #ccc;
    border: none;
    border-radius: 10px;
    font-size: 38px;
    color: #fff;
  }
  .confirm {
    background-color: #0097FF;
  }
</style>
